<template>
	<view>
		<scroll-view class="scroll" scroll-y="true">
			<view class="title">请认真填写以下信息</view>
			<u-form :model="form" ref="uForm" label-width="140">
				<view class="box">
					<view class="box-title">申请人信息相关</view>
					<u-form-item label="部门" prop="dept" required>
						<u-input v-model="form.dept" disabled placeholder="例如人事部、行政部..." />
						<!-- <div @click="showDept = true" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer;"></div>
						<u-icon slot="right" name="arrow-right" @click="showDept = true"></u-icon> -->
					</u-form-item>
					<!-- <u-form-item label="审批人" prop="leader" required>
						<u-input v-model="form.leader" disabled placeholder="请选择审批人的姓名" />
						<div @click="showLeader = true" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer;"></div>
						<u-icon slot="right" name="arrow-right" @click="showLeader = true"></u-icon>
					</u-form-item> -->
					<u-form-item label="申请人" prop="staff" required>
						<u-input v-model="form.staff" placeholder="请输入你的姓名" :disabled="hasStaff?true:false" @blur="staffBlur"/>
						<!-- <u-icon slot="right" color="red" name="close-circle" @click="clearStorage"></u-icon> -->
					</u-form-item>
					<u-form-item v-if="form.staff" label="手机">
						<u-input v-model="form.iphone" type="number" placeholder="请输入你的手机号码" />
					</u-form-item>
				</view>
				<view v-if="form.iphone" class="box">
					<view class="box-title">访客人员信息</view>
					<u-form-item label="类型" prop="visitSite" required>
						<u-input v-model="form.typeLab" disabled placeholder="请选择类型"/>
						<div @click="showType = true" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer;"></div>
						<u-icon slot="right" name="arrow-right" @click="showType = true"></u-icon>
					</u-form-item>
					<template v-if="form.type">
						<u-form-item v-if="form.type!=5" label="姓名" prop="visitor" :required="form.type!=6?false:true">
							<u-input v-if="form.type==5 || form.type==7" v-model="form.visitor" placeholder="请输入来访人的真实姓名" />
							<view v-else class="container">
								<u-input
								  v-model="form.visitor"
								  @focus="onFocus"
								  @input="onInput"
								  placeholder="搜索或输入来访人的真实姓名"
								  :style="{ width: '100%' }"
								></u-input>
								<view v-if="showDropdown" class="dropdown">
								  <view
									v-for="item in filteredVisitors"
									:key="item.id"
									class="dropdown-item"
									@click="selectVisitor(item)"
								  >
									{{ item.visitor }}
								  </view>
								</view>
							</view>
						</u-form-item>
						<u-form-item v-if="form.type!=5" label="手机" prop="vphone" :required="form.type!=6?false:true">
							<u-input v-model="form.vphone" placeholder="请输入来访人的手机号码" />
						</u-form-item>
						<u-form-item v-if="form.type!=5" label="性别" prop="sex" :required="form.type!=6?false:true">
							<u-radio-group v-model="form.sex">
								<u-radio v-for="(item, index) in sexList" :key="index" :name="item.value">
									{{ item.label }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item v-if="form.type!=5" label="证件号" prop="idCard" :required="form.type!=6?false:true">
							<u-input v-model="form.idCard" placeholder="身份证号/台胞证/护照" />
						</u-form-item>
						<u-form-item v-if="form.type!=5" label="身份证照片" prop="idCardImg" label-width="150" :required="form.type!=6?false:true">
							<u-upload ref="idCardImgUpload" name="file" :action="baseUrl+'/visitlog/UploadIdCardImg'" :file-list="idCardImgList" max-count="1" :show-progress="false" image-mode="widthFix" @on-success="idCardImgOnSuccess" @on-remove="idCardImgOnRemove"></u-upload>
						</u-form-item>
						<u-form-item v-if="form.type!=7" label="来访单位" prop="vcompany" required>
							<u-input v-model="form.vcompany" placeholder="请输入来访人的单位" />
						</u-form-item>
						<u-form-item label="来访人数" prop="vnum" :required="form.type!=6?false:true">
							<u-input v-model="form.vnum" placeholder="请输入来访人数" type="number" />
						</u-form-item>
						<u-form-item label="来访时间" prop="visitTime" required>
							<u-input v-model="form.visitTime" disabled placeholder="请选择预约来访时间" />
							<div @click="showDate = true" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer;"></div>
							<u-icon slot="right" name="arrow-right" @click="showDate = true"></u-icon>
						</u-form-item>
						<u-form-item label="结束时间" prop="vendTime" required>
							<u-input v-model="form.vendTime" disabled placeholder="请选择预约结束时间" />
							<div @click="showVend = true" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer;"></div>
							<u-icon slot="right" name="arrow-right" @click="showVend = true"></u-icon>
						</u-form-item>
						<u-form-item label="拜访事由" prop="vreason" required>
							<u-input border v-model="form.vreason" placeholder="请输入拜访事由" type="textarea" />
						</u-form-item>
						<u-form-item v-if="form.type==='6' || form.type==='8'" label="上传人脸" prop="vimg" label-width="150" :required="form.type!=6?false:true">
							<u-upload ref="vimgUpload" name="file" :action="baseUrl+'/visitlog/uploadvimg'" :file-list="vimgList" max-count="1" :show-progress="false" image-mode="widthFix" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
						</u-form-item>
						<u-form-item label="车牌号" prop="carNo">
							<u-input v-model="form.carNo" placeholder="请输入来访人的车牌号" />
						</u-form-item>
					</template>
				</view>
			</u-form>
		</scroll-view>
		<u-row gutter="32" class="foot">
			<u-col span="4">
				<u-button type="error" @click="logout">退出</u-button>
			</u-col>
			<u-col span="4">
				<u-button type="primary" @click="myApply">我的申请</u-button>
			</u-col>
			<u-col span="4">
				<u-button type="primary" :disabled="form.status==0?true:false" throttle-time="3000" @click="submit">提交</u-button>
			</u-col>
		</u-row>
		<view style="height: 51rpx;"></view>
		<u-picker v-model="showDate" mode="time" title="选择预约来访时间" :params="params" @confirm="dateConfirm"></u-picker>
		<u-picker v-model="showVend" mode="time" title="选择预约结束时间" :params="params" @confirm="vendConfirm"></u-picker>
		<u-select v-model="showType" mode="mutil-column-auto" title="选择类型" :list="typeList" @confirm="typeConfirm"></u-select>
		<u-select v-model="showLeader" title="选择人员" :list="leaderList" @confirm="leaderConfirm"></u-select>
		<u-select v-model="showDept" title="选择部门" :list="deptList" @confirm="deptConfirm"></u-select>
		<u-modal v-model="showMsg" :title="title" :content="content" @confirm="confirmMsg"></u-modal>
		<u-modal v-model="show" @confirm="confirm" show-cancel-button content="确定吗？结束来访后能重新申请"></u-modal>
		<view v-if="form.status==0" class="top-msg green">已提交，信息审核中</view>
		<view v-if="form.status==20" class="top-msg red">申请已被拒绝，若有疑意请和受访人联系</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visitorList: [],
				showDropdown: false,
				hasStaff: false,
				show: false,
				baseUrl: '',
				deptList: [],
				leaderAll: [],
				leaderList: [],
				idCardImgList: [], // 身份证照片列表
				vimgList: [],  // 头像列表
				showDate: false,
				showVend: false,
				showType: false,
				showLeader: false,
				showDept: false,
				showMsg:false,
				content:'',
				title:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true
				},
				form: {
					visitor: '',
					vphone: '',
					sex: '',
					idCard: '',
					idCardImg: '',
					vcompany: '',
					vnum: null,
					visitTime: '',
					vendTime: '',
					vreason: '',
					type: '',
					vimg: '',
					carNo: '',
					leader: '',
					dept: '',
					staff: '',
					iphone: '',
					status: -1, // 如 -1初次使用，0审核中，1已同意，2被拒绝
				},
				sexList: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				typeList: [
					{
						value: '5',
						label: '政府人员'
					},
					{
						value: '6',
						label: '长驻人员'
					},
					{
						value: '7',
						label: '面试人员'
					},
					{
						value: '8',
						label: '其他人员'
					}
				],
				typeRules: {
					noface: {
						vcompany: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
						visitTime: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						vendTime: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						type: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						vreason: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
						dept: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						staff: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
					},
					face: {
						visitor: [
							{ 
								required: true, 
								message: '请输入', 
								// 可以单个或者同时写两个触发验证方式 
								trigger: ['change','blur'],
							}
						],
						vphone: [
							{
								required: true, 
								message: '请输入',
								trigger: ['change','blur'],
							},
							{
								// 自定义验证函数
								validator: (rule, value, callback) => {
									// 返回true表示校验通过，返回false表示不通过
									// this.$u.test.mobile()就是返回true或者false的
									return this.$u.test.mobile(value);
								},
								message: '手机号码不正确',
								trigger: ['change','blur'],
							}
						],
						sex: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
								type: 'any'
							}
						],
						idCard: [
							{
								required: true, 
								message: '请输入',
								trigger: ['change','blur'],
							},
							{
								validator: (rule, value, callback) => {
									return this.$u.test.idCard(value) || this.$u.test.isTWCard(value) || this.$u.test.isHu(value);
								},
								message: '证件号不正确，如带X请大写',
								trigger: ['change','blur'],
							}
						],
						idCardImg: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
						vcompany: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
						vnum: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
								type: 'number'
							}
						],
						visitTime: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						vendTime: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						type: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						vreason: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
						dept: [
							{ 
								required: true, 
								message: '请选择', 
								trigger: ['change','blur'],
							}
						],
						// leader: [
						// 	{ 
						// 		required: true, 
						// 		message: '请选择', 
						// 		trigger: ['change','blur'],
						// 	}
						// ],
						staff: [
							{ 
								required: true, 
								message: '请输入', 
								trigger: ['change','blur'],
							}
						],
						// carNo: [
						// 	{
						// 		validator: (rule, value, callback) => {
						// 			if(value){
						// 				return this.$u.test.carNo(value) || this.$u.test.carNo2(value);
						// 			}else{
						// 				return true
						// 			}
						// 		},
						// 		message: '车牌号不正确',
						// 		trigger: ['change','blur'],
						// 	}
						// ]
					}
				}
			}
		},
		onLoad() {
			this.baseUrl = this.$u.http.config.baseUrl
			
			this.getDepts()
			this.getSysUsers()
			// this.getOne()
			
			const iphone = uni.getStorageSync('iphone_key')
			const staff = uni.getStorageSync('staff_key')
			if(staff){
				this.form.staff = staff
				this.form.iphone = iphone
				this.hasStaff = true
			}
		},
		computed: {
			filteredVisitors() {
			  return this.visitorList.filter(item =>
				item.visitor.includes(this.form.visitor)
			  );
			},
		},
		methods: {
			onFocus() {
			  this.showDropdown = true;
			},
			onInput() {
			  this.showDropdown = this.form.visitor !== '';
			},
			selectVisitor(obj) {
			  this.form = {
				...this.form,
			  	visitor: obj.visitor,
			  	vphone: obj.vphone,
			  	sex: obj.sex,
			  	idCard: obj.idCard,
			  	vcompany: obj.vcompany,
			  	vnum: obj.vnum,
			  	visitTime: obj.status==50?'':obj.visitTime,
			  	vendTime: obj.status==50?'':obj.vendTime,
			  	visitSite: obj.status==50?'':obj.visitSite,
			  	vreason: obj.status==50?'':obj.vreason,
			  	carNo: obj.carNo
			  }
			  if(obj.idCardImg) {
				  this.form.idCardImg = obj.idCardImg
				  this.idCardImgList.push({ url: obj.idCardImg })
			  }
			  if(obj.vimg) {
				  this.form.vimg = obj.vimg
				  this.vimgList.push({ url: obj.vimg })
			  }
			  this.showDropdown = false;
			},
			clearStorage() {
				try {
					uni.removeStorageSync('iphone_key')
					uni.removeStorageSync('staff_key')
					this.form.staff = ''
					this.form.iphone = ''
					this.$u.toast('该功能保留到3月19号')
				} catch (e) {
					this.$u.toast('清除异常')
				}
			},
			myApply() {
				uni.navigateTo({
					url: '/pages/my/myApply?staff='+this.form.staff
				});
			},
			logout() {
				const accessToken = uni.getStorageSync('accessToken')
				try {
					this.$u.post('/sysAuth/logout',{},{
						'Authorization': `Bearer ${accessToken}`
					}).then(res => {
						if(res.code==200){
							this.$u.toast('退出成功')
						}else{
							this.$u.toast(res.message)
						}	
					}).catch(err => {
						this.$u.toast(err)
					})
					uni.removeStorageSync('accessToken');
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} catch (e) {
					this.$u.toast('退出失败',e)
				}
			},
			getUserInfo(accessToken) {
				this.$u.get('/sysAuth/userInfo/1',{},{
						'Authorization': `Bearer ${accessToken}`
					}).then(res => {
					if(res.code==200){
						this.form.deptId = res.result.orgId
						this.form.dept = res.result.orgName
						this.leaderList = this.leaderAll.filter(item => item.orgId == this.form.deptId)
						if(this.leaderList.length>0) {
							this.form.leaderId = this.leaderList[0].value
							this.form.leader = this.leaderList[0].label
						}
					}else{
						this.$u.toast('获取用户失败',res.message)
					}	
				}).catch(err => {
					this.$u.toast('获取用户异常',err)
				})
			},
			staffBlur(e) {
				this.$u.get('/visitLogExtend/UserByName/'+e).then(res => {
					if(res.code==200){
						this.form.iphone = res.result
					}else{
						this.$u.toast(res.message)
					}
				}).catch(err => {
					this.$u.toast('申请人验证异常',err)
				})
			},
			confirm() {
				this.$u.post('/visitLogExtend/update',{...this.form,status:50}).then(res => {
					if(res.code==200){
						this.$u.toast('结束来访成功')
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}else{
						this.$u.toast('删除失败',res.message)
					}	
				}).catch(err => {
					this.$u.toast('删除异常', err)
				})
			},
			cancel() {
				const oldVphone = uni.getStorageSync('vphone_1_key')
				if(oldVphone){
					this.show = true
				}else {
					return this.$u.toast('没有来访记录')
				}
			},
			// clear() {
			// 	this.form = {}
			// 	this.$refs.vimgUpload.clear()
			// },
			getDepts() {
				this.$u.post('/visitLogExtend/SysOrgDeptIdDropdown').then(res => {
					if(res.code==200){
						const foundItem = res.result.find(item => item.label.indexOf('台光電子') !== -1 );
						if (foundItem) {
							const relatedItems = res.result.filter(item => item.pid === foundItem.value);
							this.deptList = relatedItems.filter(item => item.label.indexOf('_') == -1);
						}
					}else{
						this.$u.toast('获取部门失败',res.message)
					}
				}).catch(err => {
					this.$u.toast('获取部门异常',err)
				})
			},
			getSysUsers() {
				this.$u.post('/visitLogExtend/SysUserLeaderIdDropdown').then(res => {
					if(res.code==200){
						this.leaderList = res.result
						this.leaderAll = res.result
						const accessToken = uni.getStorageSync('accessToken')
						if(!accessToken){
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}else{
							this.getUserInfo(accessToken)
						}
					}else{
						this.$u.toast('获取被访人失败',res.message)
					}
				}).catch(err => {
					this.$u.toast('获取被访人异常',err)
				})
			},
			idCardImgOnRemove() {
				this.$refs.idCardImgUpload.clear()
				this.form.idCardImg = ''
			},
			idCardImgOnSuccess(event) {
				if(event.code==200) {
					this.form.idCardImg = event.result.url
				}
			},
			onRemove() {
				this.$refs.vimgUpload.clear()
				this.form.vimg = ''
			},
			onSuccess(event) {
				if(event.code==200) {
					this.form.vimg = event.result.url
				}
			},
			getOne() {
				this.vimgList = []
				const oldVphone = uni.getStorageSync('vphone_1_key')
				if(oldVphone){
					this.$u.get('/visitlog/getvisit',{
						type:1,
						vphone:oldVphone
					},{
						'Content-Type': 'application/json;charset=UTF-8',
						'Content-Type': 'application/x-www-form-urlencoded'
					}).then(res => {
						if(res.code==200){
							const obj = res.result
							this.form = {
								id: obj.id,
								type: obj.type,
								visitor: obj.visitor,
								vphone: obj.vphone,
								sex: obj.sex,
								idCard: obj.idCard,
								vcompany: obj.vcompany,
								vnum: obj.vnum,
								visitTime: obj.status==50?'':obj.visitTime,
								vendTime: obj.status==50?'':obj.vendTime,
								visitSite: obj.status==50?'':obj.visitSite,
								vreason: obj.status==50?'':obj.vreason,
								vimg: obj.vimg,
								carNo: obj.carNo,
								leaderId: obj.status==50?'':obj.leaderId,
								leader: obj.status==50?'':obj.leaderIdRealName,
								deptId: obj.status==50?'':obj.deptId,
								dept: obj.status==50?'':obj.deptIdName,
								staff: obj.status==50?'':obj.staff,
								iphone: obj.status==50?'':obj.iphone,
								status: obj.status
							}
							this.vimgList.push({ url: this.form.vimg })
							if(obj.status==10 || obj.status==25 || obj.status==30 || obj.status==40 || obj.status==45){
								uni.redirectTo({
									url: '/pages/my/askCode?content='+obj.id+','+obj.status+','+obj.type
								})
							}
						}else{
							this.$u.toast(res.message)
						}
					}).catch(err => {
						this.$u.toast(err)
					})
				}
			},
			typeConfirm(e) {
				this.form.type = e[0].value
				this.form.typeLab = e[0].label
				if(e[0].value==6 || e[0].value==8) {
					this.$u.post('/visitlog/page',{type:e[0].value,staff:this.form.staff,page:1,pageSize:1000000}).then(res => {
						if(res.code==200){
							this.visitorList = Object.values(res.result.items.reduce((acc, current) => {
							  const key = `${current.idCard}`
							  // 如果当前项的 id 更大，则更新
							  if (!acc[key] || (acc[key].id < current.id)) {
							    acc[key] = current
							  }
							  return acc
							}, {}))
							// this.visitorList = res.result.items.filter(item => item.type>4)
						}else{
							this.$u.toast('请求失败',res.message)
						}	
					}).catch(err => {
						this.$u.toast('请求异常',err)
					})
				}
			},
			dateConfirm(e) {
				this.form.visitTime = e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute
			},
			vendConfirm(e) {
				this.form.vendTime = e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute
			},
			deptConfirm(e) {
				this.form.deptId = e[0].value
				this.form.dept = e[0].label
				this.leaderList = this.leaderAll.filter(item => item.orgId == this.form.deptId)
				if(this.leaderList.length>0) {
					this.form.leaderId = this.leaderList[0].value
					this.form.leader = this.leaderList[0].label
				}
			},
			leaderConfirm(e) {
				this.form.leaderId = e[0].value
				this.form.leader = e[0].label
			},
			confirmMsg() {
				this.showMsg = false
				if(this.title == '提交成功'){
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}
			},
			submit() {
				if(this.form.type==7) {
					this.form.vcompany = '个人/团体'
				}
				if(this.form.type==5 || this.form.type==7) {
					this.$refs.uForm.setRules(this.typeRules['noface'])
				}
				if(this.form.type==6) {
					this.$refs.uForm.setRules(this.typeRules['face'])
				}
				if(this.form.type==8) {
					if(this.form.vimg) {
						this.$refs.uForm.setRules(this.typeRules['face'])
					}else{
						this.$refs.uForm.setRules(this.typeRules['noface'])
					}
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/visitLogExtend/add',{...this.form,type:this.form.type,status:0}).then(res => {
							uni.setStorageSync('staff_key', this.form.staff)
							uni.setStorageSync('iphone_key', this.form.iphone)
							if(res.code==200){
								this.showMsg = true
								this.title = '提交成功'
								this.content = '可再次到此页面点我的申请查询结果'
							}else{
								this.showMsg = true
								this.title = '提交失败'
								this.content = res.message
							}
						}).catch(err => {
							this.showMsg = true
							this.title = '提交失败'
							this.content = err
						})
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules);
		// }
	}
</script>

<style scoped>
	.title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding: 67rpx 0 10rpx 40rpx;
	}
	
	.box {
		width: 690rpx;
		background: #fff;
		margin: auto;
		margin-top: 30rpx;
		padding: 0 23rpx;
		border-radius: 12rpx;
	}
	
	.box-title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		padding-top: 48rpx;
	}
	
	.btn {
		width: 690rpx;
		background: #1976D2;
		color: #fff;
		margin-top: 66rpx;
	}
	
	.top-msg {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: var(--window-top);
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		z-index: 999;
	}
	.top-msg.green {
		background: #19BE6B;
	}
	.top-msg.red {
		background: #FA3534;
	}
	
	.scroll {
		height: calc(100vh - var(--window-top) - var(--window-bottom) - 142rpx);
		width: 100%;
	}
	
	.foot {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		border-top: 1rpx solid #F5F5F5;
		background: #fff;
	}
	
	.container {
	  position: relative;
	  width: 100%;
	}
	
	.dropdown {
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  background-color: white;
	  position: absolute;
	  z-index: 10;
	  width: 100%;
	  max-height: 200px;
	  overflow-y: auto;
	  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}
	
	.dropdown-item {
	  padding: 10px;
	  cursor: pointer;
	}
	
	.dropdown-item:hover {
	  background-color: #f0f0f0;
	}
</style>
